import React, { useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import { Spin, Tabs, Button, message } from 'antd';
import { CmdbContent, CmdbHeader, Authorized } from '@/components';
import permission from '@/config/permission';
import ResourceList from './ResourceList';
import { useDownloadResourceFile } from '../hooks';
import { useResourceCategoryTabs } from './hooks';

/**
 * 导入任务详情
 */
function ResourceImportTasksDetail() {
    const location = useLocation();
    const history = useHistory();

    const [tabKey, setTabKey] = useState('');

    const downloadResourceFile = useDownloadResourceFile({
        onSuccess() {
            message.success('下载成功');
        },
        onError() {
            message.error('下载失败');
        },
    });

    const resourceCategoryTabs = useResourceCategoryTabs({
        defaultParams: [location.state.ossFileUploadTaskId],
        onSuccess(data) {
            setTabKey(data[0]?.key);
        },
    });

    const renderDetail = () => {
        if (resourceCategoryTabs.loading) {
            return <Spin />;
        }

        if (tabKey) {
            return (
                <>
                    <Tabs
                        type="card"
                        items={resourceCategoryTabs.data.map((item) => ({
                            ...item,
                            children: (
                                <ResourceList
                                    key={item.key}
                                    taskId={location.state.ossFileUploadTaskId}
                                    modelId={item.key}
                                />
                            ),
                        }))}
                        activeKey={tabKey}
                        onChange={setTabKey}
                    />
                </>
            );
        }

        return null;
    };

    return (
        <CmdbContent>
            <CmdbHeader
                title={`${location.state.ossFileUploadTaskName} 导入任务详情`}
                showBackButton
                history={history}
                goBackUrl="/resource/import-tasks"
            />
            <div className="back-white padding-10">
                <Authorized authority={permission.resourceImportTasks_download} noMatch={null}>
                    <Button
                        loading={downloadResourceFile.loading}
                        disabled={
                            !['upload-success', 'check-ing', 'check-success', 'check-fail'].includes(
                                location.state.status
                            )
                        }
                        onClick={() => {
                            downloadResourceFile.run(location.state.ossFileUploadTaskId);
                        }}
                    >
                        下载
                    </Button>
                </Authorized>
            </div>
            <div className="back-white padding-10">{renderDetail()}</div>
        </CmdbContent>
    );
}

export default ResourceImportTasksDetail;
